<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>遍历数组的三种方式</h2>
    <ol>
        <li>传统for循环: 利用数组的长度，进行for循环</li>
        <li>for...in循环: 也称为foreach循环，可以遍历出对象的属性名，属性名以字符串值来呈现。</li>
        <li>for...of循环: ES6新特性，直接遍历出对象的值</li>
    </ol>
</body>
<script>
    let arr1 = [100, 200, 300, 400, 500];

    let sum1 = 0;
    // 数组遍历一共有三种方式
    for (let i = 0; i < arr1.length; i++) {
        console.log(i, " = ", arr1[i]);
        sum1 += arr1[i];
    }
    console.log(sum1);

    let sum2 = 0;
    // for...in循环可以直接遍历出对象的索引
    // JS中数组实际上就是属性名是数值的对象
    for (let i in arr1) {
        console.log(i, " = ", arr1[i]);
        sum2 += arr1[i];
    } 
    console.log(sum2);

    let sum3 = 0;
    // for...of循环，直接遍历出对象的值
    // 该方法获取值比较方便，但是无法获取索引
    for (let v of arr1) {
        console.log(v);
        sum3 += v;
    }
    console.log(sum3);

    // 在ES6之后，还推出了一系列的遍历函数（forEach,map,filter,some,every,find,findIndex）这里就不去一一讲解。
    // 课堂作业：利用任意一种循环方式，对arr1数组中的成员求和。

</script>

</html>